import * as API from '@/services';
import {createRespResult, DEFAULT_FORM_LAYOUT, KfBizQuickFormProps, KfFloatingContextProps, KfInput, KfQuickForm, KfTextArea} from 'kf-web-library';
import {Col, Form, Row} from 'antd';
import React, { FunctionComponent, useRef } from 'react';

const FormItem = Form.Item;

type DataFormProps = {} & KfBizQuickFormProps & KfFloatingContextProps;

/**
 * 选刊发文工具 表单
 */
const QuickForm: FunctionComponent<DataFormProps> = (props) => {
  const { formType, bizId, ...rest } = props;
  const originalLinks = useRef<API.AbtLink[]>([]);

  return (
    <KfQuickForm
      formType={formType}
      formProps={{
        labelCol: {
          flex: '0 0 80px',
        },
        wrapperCol: {
          flex: '1',
        },
      }}
      queryRequest={{
        modify: true,
        create: true,
      }}
      defaultQueryRequest={() =>
        API.querySiteAboutInfo().then((resp) => {
          originalLinks.current = resp.data?.toolAddress || [];
          const links = (resp.data?.toolAddress || []).map((abtlink, inx) => {
            return { ...abtlink, inx } as API.AbtLink;
          });
          return new Promise((resolve) => {
            const newRespResult = createRespResult(
              links.find((t) => t.inx === bizId),
              resp.flag,
              {},
            ) as API.RespResult<API.AbtLink>;
            resolve(newRespResult);
          });
        })
      }
      submitRequest={{
        create: (formValues) => {
          return API.patchSiteAboutInfo({
            toolAddress: [
              ...originalLinks.current,
              {
                nameCn: formValues?.nameCn,
                nameEn: formValues?.nameEn,
                descriptionCn: formValues?.descriptionCn,
                descriptionEn: formValues?.descriptionEn,
                url: formValues?.url,
              },
            ],
          });
        },
        modify: (formValues) => {
          return API.patchSiteAboutInfo({
            toolAddress: originalLinks.current.map((abtlink, inx) => {
              if (inx === bizId) {
                return {
                  nameCn: formValues?.nameCn,
                  nameEn: formValues?.nameEn,
                  descriptionCn: formValues?.descriptionCn,
                  descriptionEn: formValues?.descriptionEn,
                  url: formValues?.url,
                }
              }
              return abtlink;
            }),
          });
        },
      }}
      {...rest}
    >
      <Row>
        <Col span={12}>
          <FormItem name={nameof<API.AbtLink>((x) => x.nameCn)} label="中文名称" rules={[{ required: true }]}>
            <KfInput />
          </FormItem>
          <FormItem name={nameof<API.AbtLink>((x) => x.descriptionCn)} label="中文描述" rules={[{ required: false }]}>
            <KfTextArea />
          </FormItem>
        </Col>
        <Col span={12}>
          <FormItem name={nameof<API.AbtLink>((x) => x.nameEn)} label="英文名称" rules={[{ required: false }]}>
            <KfInput />
          </FormItem>
          <FormItem name={nameof<API.AbtLink>((x) => x.descriptionEn)} label="英文描述" rules={[{ required: false }]}>
            <KfTextArea />
          </FormItem>
        </Col>
      </Row>
      <FormItem name={nameof<API.AbtLink>((x) => x.url)} label="工具链接" rules={[{ required: true }]}>
        <KfInput />
      </FormItem>
    </KfQuickForm>
  );
};

export default QuickForm;
